<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-17 11:27:14
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:36:04
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\airSeaTransport\components\OrderDetailDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog 
    v-model="visible"
    title="订单明细"
  >
    <customContainer :config="config" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive } from 'vue'
import { ElButton } from 'element-plus'
import { getSeaAirTransportFinanceAccountLadingNoDetails } from '@/api/finance/receiverManange'
import { indexObject } from '../../receiveabeTypes'

const visible = ref<boolean>(false)
const multipleSelection = ref<indexObject[]>([])
const config = reactive<indexObject>({
  query: {
    fields: [],
    queryParams: {
      pageSize: 10,
      pageNum: 1,
      // serialNo: route.query.serialNo,
      // type: 2,
    },
    formOption: {},
  },
  table: {
    columns: [
      { label: '订单号', align: 'center', prop: 'orderNo' },
      { label: '费用名称', align: 'center', prop: 'feeName' },
      { label: '待确认金额', align: 'center', prop: 'amount' },
      { label: '预充值额度', align: 'center', prop: '' },
      { label: '币种', align: 'center', prop: 'currency' },
      { label: '操作人', align: 'center', prop: 'receivingUser' },
      { label: '操作时间', align: 'center', prop: 'receivingDate' },
      {
        label: '操作',
        align: 'center',
        width: '200',
        fixed: 'right',
        render(h, params) {
          return h(
            ElButton,
            {
              text: true,
              type: 'primary',
              onClick: () => {
              },
            },
            {
              default: () => '单笔剔除',
            },
          )
        },
      },
    ],
    event: {
      onSelectionChange: (rows) => {
        multipleSelection.value = rows
      },
    },
  },
  api: getSeaAirTransportFinanceAccountLadingNoDetails,
})

const open = ():void => {
  visible.value = true
}

defineExpose({
  open,
}) 
</script>